{% extends 'base.html' %}




{% block body %}
    <div class="layer" id="layer">
        <div class="title"><span class="name">提示</span><span class="icon close-btn"
                                                             onClick="closelayer('layer-bg','layer');return false;"></span>
        </div>
        <div class="tips-cnt">
            <i class="ico-tip icon"></i>
            <div class="fr">
                亲爱的用户，恭喜您注册成为伟峰科技的会员
            </div>
            <p class="tac"><a href="smrz.html" class="btn" style="width:150px;">马上去实名认证</a> <a href="reg-success.html"
                                                                                               class="btn">稍后再说</a></p>
        </div>
    </div>
    <div class="layer-bg" id="layer-bg"></div>

    <div class="clear"></div>
    <!--header end-->

    <div class="wrap">
        <div class="login-bg">
            <div class="login-ad"><img src="/static/images/login-ad.png"></div>
            <div class="login-box" id="login-box">
                <div class="title-bar">
                    <ul id="dl-tab">
                        <li class="current">手机注册</li>
                        <li>邮箱注册</li>
                    </ul>
                </div>
                <ul class="login-form">
                    <li>
                        <div class="input-box">
                            <i class="ico ico-wap icon-login"></i>
                            <input type="text" class="login-txt" placeholder="手机号">
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-yzm icon-login"></i>
                            <input type="text" class="login-txt w140" placeholder="验证码"> <span class="yzm"><img
                                src="/static/images/captcha.png"></span>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-yzm icon-login"></i>
                            <input type="text" class="login-txt w140" placeholder="验证码"> <a href="#"
                                                                                            class="btn get-yzm fr"
                                                                                            id="getyzm">获取验证码</a>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-pwd icon-login"></i>
                            <input type="text" class="login-txt" placeholder="密码">
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-pwd icon-login"></i>
                            <input type="text" class="login-txt" placeholder="确认密码">
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <button class="btn dl mt0" onClick="openlayer('layer-bg','layer')">注 册</button>
                    </li>
                    <li>
                        <div class="dsp mt20 tac">已有账号？ <a href="login.html" class="c5">马上登录</a></div>
                    </li>
                </ul>


                <ul class="login-form" style="display:none;">
                    <li>
                        <div class="input-box">
                            <i class="ico ico-mail icon-login"></i>
                            <input type="text" name="user" class="login-txt" placeholder="邮箱">
                            <span></span>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-yzm icon-login"></i>
                            <input type="text" name="verCode" class="login-txt w140" placeholder="验证码">
                            <span></span>
                            <span class="yzm"><img src="/static/images/captcha.png"></span>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-pwd icon-login"></i>
                            <input type="text" name="password" class="login-txt" placeholder="密码">
                            <span></span>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <div class="input-box">
                            <i class="ico ico-pwd icon-login"></i>
                            <input type="text" name="password2" class="login-txt" placeholder="确认密码">
                            <span></span>
                        </div>
                        <div class="tips"></div>
                    </li>
                    <li>
                        <button class="btn dl mt0">注 册</button>
                    </li>
                    <li>
                        <div class="dsp mt20 tac">已有账号？ <a href="login.html" class="c5">马上登录</a></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!--footer begin-->
    <div class="clear"></div>

    <script language="javascript" type="text/javascript">
        var times = 60, cuttime;

        function getyzm(idn) {
            times--;
            if (times > 0 && times < 60) {
                $(idn).text(times + "秒后重新获取");
                $(idn).addClass("fail");
                cuttime = setTimeout(function () {
                    getyzm(idn)
                }, 1000);
            }
            else {
                $(idn).text("获取短信验证码");
                times = 60;
                $(idn).removeClass("fail");
                clearTimeout(cuttime);
            }
        }

        $(function () {
            $("#dl-tab li").bind({
                click: function () {
                    $("#dl-tab li").removeClass("current");
                    $(this).addClass("current");
                    $("#login-box .login-form").hide();
                    $("#login-box .login-form").eq($(this).index()).show();
                }
            });

            $("#getyzm").bind("click", function () {
                if (times == 60) {
                    getyzm("#getyzm");
                }
                return false;
            });

        });
    </script>

    <!-- 邮箱注册验证 -->
    <script>
        error_username = false;
        error_vercode = false;
        error_password = false;

        $("input[name='user']").blur(function () {

        });
        $("input[name='verCode").blur(function () {

        });
        $("input[name='password']").blur(function () {

        });

        //校验用户名否正确
        function check_username() {
            $username = $("input[name='user']");
            username = $username.val();
            if (username == "") {
                error_username = false;
                $username.next().show().text("请输入邮箱").css("color", "red")
            } else {
                reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
                if (reg.test(username)) {
                    error_username = true;
                    $username.next().hide()
                } else {
                    $username.val("");
                    error_username = false;
                    $username.next().show.text("请输入正确的邮箱格式").css("color", "red")
                }

            }


        }

        function check_vercode() {
            $vercode = $("input[name='vercode']");
            vercode = $vercode.val();
            if (vercode == "") {
                error_vercode = false;
                $vercode.next().show().text("请输入验证码").css("color", "red")
            } else {
                error_vercode = true;
                $vercode.next().hide()
            }

            //密码
            function check_password() {
                $pwd = $("input[name='password']");
                password = $pwd.val();
                if (password == "") {
                    error_password = false;
                    $pwd.next().show().text("请输入密码").css("color", "red")
                } else {
                    error_password = true;
                    $nickname.next().hide()
                }
            }

            //点击注册
            $('.btn').click(function () {
                check_username();
                check_vercode();
                check_password();
                if (error_password && error_username && error_nickname) {
                    username = $("input[name='user']").val();
                    vercode = $("input[name='vercode']").val();
                    password = $("input[name='password']").val();
                    csrf = $("input[name='csrfmiddlewaretoken']").val();
                    from_data = {
                        "username": username, "nickname": nickname,
                        "password": password, csrfmiddlewaretoken: csrf
                    };
                    //发送注册请求
                    $.post('/reg/', from_data, function (data) {
                        //
                        if (data.errno == 1) {
                            window.location.href = data.url
                        } else {
                            alert(data.errmsg)
                        }


                    })


                }
            })


        }


    </script>

{% endblock body %}